<template>
  <view class="uploader-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration"></view>
    
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">媒体上传</text>
      <text class="page-subtitle">分享你的精彩内容</text>
    </view>
    
    <!-- 上传类型切换标签 -->
    <view class="upload-tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'video' }"
        @click="switchTab('video')"
      >
        视频上传
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'image' }"
        @click="switchTab('image')"
      >
        图片上传
      </view>
    </view>
    
    <!-- 上传内容区域 -->
    <view class="upload-content">
      <video-upload v-if="activeTab === 'video'" />
      <image-upload v-else-if="activeTab === 'image'" />
    </view>
  </view>
</template>

<script>
import VideoUpload from './components/video-upload.vue';
import ImageUpload from './components/image-upload.vue';

export default {
  components: {
    VideoUpload,
    ImageUpload
  },
  data() {
    return {
      activeTab: 'video' // 默认显示视频上传
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
    }
  }
}
</script>

<style>
.uploader-container {
  padding: 20rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 25%);
  pointer-events: none;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-top: 60rpx;
  margin-bottom: 60rpx;
  color: #fff;
}

.page-title {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 28rpx;
  opacity: 0.8;
  display: block;
}

/* 标签切换 */
.upload-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10rpx;
  padding: 6rpx;
  margin: 0 40rpx 40rpx 40rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  border-radius: 8rpx;
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.tab-item.active {
  background: rgba(255, 255, 255, 0.9);
  color: #667eea;
  font-weight: bold;
}

/* 上传内容区域 */
.upload-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 40rpx;
  margin: 0 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}
</style>